<script setup>
import Topbar from "@/components/Topbar/index.vue";
import FormTitle from "@/components/Form/FormTitle.vue";
import Form from "@/components/Form/index.vue";
import { ref } from "vue";
import TabList from "./components/TabList/index.vue";
import PreTree from "./components/PreTree/index.vue";
import { ElMessage } from "element-plus";
import { getSysPermissionList, addRole, queryRoleDetails } from "@/api/System";
import { buildTree } from "@/utils/common";
import { useRoute } from "vue-router";
const baseformRef = ref();
const route = useRoute();
const baseformList = ref([
  {
    type: "input",
    key: "roleName",
    label: "角色名称",
    width: "260px",
    clearable: true,
    maxlength: "20",
  },
  {
    type: "input",
    key: "roleRemark",
    label: "备注",
    width: "260px",
    clearable: true,
    maxlength: "100",
  },
]);

const baseformRules = {
  roleName: [{ required: true, message: "请输入员工姓名", trigger: "change" }],
};
const originData = ref([])
const treeData = ref([]);
const tabsItem = ref({})
const changeFun = (item) => {
  tabsItem.value = item
};
const preTreeRef = ref();

const topBarRef = ref();

const tabsList = ref([]);
const uuid = computed(() => {
  return route.query.uuid;
});
onActivated(async () => {
  const res = await getSysPermissionList();
  originData.value = res //.filter(v=>v.permissionType != 'B')
  tabsList.value = originData.value.filter(
    (v) =>
      v.parentId == "0" &&
      v.permissionName != "Hello" &&
      v.permissionName != "bad-not-found"
  );
  tabsList.value.forEach((e) => {
    e.state = false;
    tabsList.value[0].state = true;
  });
  tabsItem.value = tabsList.value[0]
  treeData.value = buildTree(
    originData.value
      .map((v) => ({ ...v, disabled: true }))
      .filter(
        (item) =>
          item.permissionName != "Hello" &&
          item.permissionName != "bad-not-found" && 
          item.permissionType != "B"
      )
      .map((v) => ({ ...v, label: v.permissionLabel }))
  );
  const { permissionIds, roleName, roleRemark } = await queryRoleDetails(
    uuid.value
  );
  preTreeRef.value.setChecks(permissionIds);
  baseformRef.value.setForm({ roleName, roleRemark });
});
</script>
<template>
  <Topbar ref="topBarRef" :tabName="'查看详情'"> </Topbar>
  <div class="pl24 pt24 pr24 content_mians">
    <FormTitle class="mb16" :titleName="'基础信息'"></FormTitle>
    <Form
      ref="baseformRef"
      :formList="baseformList"
      :formRules="baseformRules"
      labelWidth="80px"
      isInline
      disabled
      :isCustomizeClass="'grid grid-template-columns-3 grid-gap-39'"
    ></Form>
    <FormTitle class="mb16 mt8" :titleName="'菜单权限'"></FormTitle>
    <TabList class="mb16" @change="changeFun" :orginList="tabsList"></TabList>
    <PreTree ref="preTreeRef" :originData="treeData" :tab="tabsItem"></PreTree>
  </div>
</template>

<style lang="less" scoped>
.content_mians {
  height: calc(100% - 80px);
  overflow: auto;
}
</style>
